<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100vw;
            height: 100vh;
            background-color: rgb(232, 228, 228);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        main {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 600px;
            height: 300px;
        }

        #cart {
            position: absolute;
            top: -45px;
            right: 0;
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-weight: 800;
            border: 1px solid black;
            border-radius: 20px;
            background-color: rgb(77, 147, 204);
        }

        #circle {
            position: absolute;
            top: -7px;
            left: 63px;
            height: 20px;
            padding: 0 5px 0 5px;
            font-size: 12px;
            color: #fff;
            line-height: 20px;
            background-color: rgb(222, 83, 83);
            border-radius: 50%;
            border: 1px solid black;
        }

        ul {
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 600px;
        }

        ul li {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            list-style-type: none;
            width: 130px;
            height: 160px;
            overflow: hidden;
        }

        ul li img {
            width: 150px;
            height: 160px;
            transition: width 0.5s, height 0.5s;
        }

        ul li .cover {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            bottom: -40px;
            width: 130px;
            height: 40px;
            z-index: 20;
            transition: bottom 0.5s;
            background-color: #fff;
            opacity: 0.5;
            /*不透明度*/
        }

        ul li .cover .buy {
            cursor: pointer;
            font-weight: 800;
            color: #000;
        }

        .clone {
            position: absolute;
            width: 30px !important;
            height: 30px !important;
            border-radius: 50%;
            opacity: 0.5;
            transition: top 0.5s, left 0.5s;
        }
    </style>
</head>

<body>
    <main>
        <div id="cart">
            <span>购物车</span>
            <div id="circle">
                0
            </div>
        </div>
        <ul>
            <li>
                <img src="./QQ图片20230203194308.jpg" alt="">
                <div class="cover">
                    <div class="buy">加购</div>
                </div>
            </li>
            <li>
                <img src="./QQ图片20230203194312.jpg" alt="">
                <div class="cover">
                    <div class="buy">加购</div>
                </div>
            </li>
            <li>
                <img src="./QQ图片20230203194314.jpg" alt="">
                <div class="cover">
                    <div class="buy">加购</div>
                </div>
            </li>
        </ul>
    </main>

    <script>
        // 遮盖层的起伏 和 图片的缩放
        let OImg = document.querySelectorAll('img');
        let OCover = document.querySelectorAll('.cover');
        let Oli = document.querySelectorAll('li');
        Oli.forEach((item, index) => {
            item.addEventListener('mouseover', function () {
                OImg[index].style.width = '180px';
                OImg[index].style.height = '190px';
                OCover[index].style.bottom = '0px';
            })
            item.addEventListener('mouseout', function () {
                OImg[index].style.width = '150px';
                OImg[index].style.height = '160px';
                OCover[index].style.bottom = '-60px';
            })
        })

        // 加购
        let num = 0;
        let OBuy = document.querySelectorAll('.buy');
        let OUl = document.querySelector('ul');
        OBuy.forEach((item, index) => {
            item.addEventListener('click', function () {
                // parentElement获取父节点 previousElementSibling获取上一个兄弟节点
                let OldElement = this.parentElement.previousElementSibling;
                // cloneNode()函数克隆节点 可接收一个布尔值参数 true为递归克隆子孙节点 默认false
                let OClone = OldElement.cloneNode();
                //先让所加购物品出现在商品顶部
                OClone.className = 'clone';
                OClone.style.left = OldElement.parentElement.offsetLeft + 'px';
                OClone.style.top = OldElement.parentElement.offsetTop - 32 + 'px';
                OUl.appendChild(OClone);
                // 加购物品到购物车的过程
                setTimeout(() => {
                    OClone.style.left = '545px';
                    OClone.style.top = '-40px';
                    setTimeout(() => {
                        OClone.style.display = 'none';

                        //动画结束购物车数字加1
                        let OCircle = document.querySelector('#circle');
                        num++;
                        OCircle.innerHTML = num;
                    }, 500)
                }, 500)
            })
        })
    </script>
</body>

</html>